{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}项目详细信息{% endblock %}

{% block css %}
    {#    <link rel="stylesheet" href="{% static 'plugins/editor-md/css/editormd.preview.min.css' %}">#}
    <style>
        .panel-default {
            margin-top: 10px;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-info {
            margin-top: 10px;
        }

        .panel-info .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-body {
            padding: 0;
        }

        .title-list {
        {#右边框#} border-right: 1px solid #dddddd;
        {#最小高度#} min-height: 300px;
        }

        .title-list ul {
            padding-left: 15px;
            padding-top: 20px;
        }

        .title-list ul a {
            display: block;
            padding: 5px 0;
        }

        .content {
        {#左边框#} border-left: 1px solid #dddddd;
            min-height: 400px;
        {#向左移-1px,与title-list 重合#} margin-left: -1px;
        }

        .panel-body {
        {#panel-body 默认带边距,这里设置为0#} padding: 0;
        }


        th {
            text-align: center;
        }


        table {
            border: 1px solid black;
            width: 50%;
            margin: 0 auto;
            border-spacing: 0;
        }

        tr {
        {#border: 1px solid black;#} text-align: center;
        }

        td {
            border: 1px solid black;
            text-align: center;
        }


    </style>
{% endblock %}

{% block content %}
    <!-- project 项目 -->
    <div class="container">
        <div class="panel panel-info">
            <div class="panel-heading">
                <div>

                    {#  <span style="font-weight: bold">SR No#: {{ project_obj.SR_No }} ；</span>#}
                    {#                    <span style="font-weight: bold">项目名称: </span>#}
                    {#                    <span >{{ project_obj.customer }}</span>#}
                    <span style="font-weight: bold">项目参与者: </span>
                    <span>
                        {% for actor in project_obj.actors.all %}
                            {#   {% if not forloop.last %} 是一个常用的条件判断，#}
                            {#   用于在循环迭代过程中检测当前项是否是列表或查询集中的最后一项。#}
                            {#   forloop.last 是一个在 for 循环内部提供的特殊变量，#}
                            {#   当迭代到最后一个元素时，它的值为 True；否则为 False。#}
                            {{ actor }}{% if not forloop.last %}, {% endif %}
                        {% endfor %}
                    </span>

                </div>
            </div>

            <div class="panel-body" style="margin: 10px">
                <table class="table table-bordered table-hover table-condensed">
                    <thead>
                    <tr>
                        <th>SR_No#</th>
                        <th>客户&项目</th>
                        <th>Owner</th>
                        <th>工作分类</th>
                        <th>软件</th>
                        <th>版本</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{{ project_obj.SR_No }}</td>
                        <td>{{ project_obj.customer }}</td>
                        <td>{{ project_obj.sa }}</td>
                        <td>{{ project_obj.category }}</td>
                        <td>{{ project_obj.software }}</td>
                        <td>{{ project_obj.version }}</td>
                    </tr>
                    </tbody>
                    <thead>
                    <tr>
                        <th>服务器数量</th>
                        <th>MFD数量</th>
                        <th>PRINTER数量</th>
                        <th>开始日期</th>
                        <th>结束日期</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>{{ project_obj.server_num }}</td>
                        <td>{{ project_obj.mfd_num }}</td>
                        <td>{{ project_obj.printer_num }}</td>
                        <td>{{ project_obj.start_date }}</td>
                        <td>{{ project_obj.start_date }}</td>
                        <td>{{ project_obj.get_status_display }}</td>
                    </tr>
                    </tbody>
                    <thead>
                    <tr>
                        <th colspan="6" style="text-align: left">客户需求或故障描述：</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td colspan="6" style="text-align: left">{{ project_obj.desc }}</td>
                    </tr>
                    </tbody>
                </table>

                {#                <div class="panel panel-success">#}
                {#                    <div class="panel-heading">#}
                {#                        客户需求或故障描述：#}
                {#                    </div>#}
                {#                    <div class="panel-body" id="previewProjectDesc">#}
                {#                        <textarea>{{ project_obj.desc }}</textarea>#}
                {#                    </div>#}
                {#                </div>#}

            </div>

        </div>
    </div>

    <!-- Task event 事件 -->
    <div class="container">
        <div class="panel panel-success">
            <div class="panel-heading">
                <div>

                    <span><i class="fa fa-info-circle" aria-hidden="true"> ：{{ task_obj.task_number }} </i></span>
                    <span><i class="fa fa-male" aria-hidden="true"> ：{{ task_obj.creator }} </i></span>

                </div>
            </div>

            <div class="panel-body">

                <div class="col-sm-2 title-list">
                    <!-- 手动增加一个id -->
                    <ul id="catalog">

                    </ul>
                </div>

                <div class="col-sm-10 content">
                    {% if task_obj %}
                        <div class="panel-body" style="margin: 10px">
                            <table class="table table-bordered table-hover table-condensed">
                                <thead>
                                <tr>
                                    <th>工作分类</th>
                                    <th>工作日期</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>加班时间</th>


                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>{{ task_obj.get_task_type_display }}</td>
                                    <td>{{ task_obj.task_date }}</td>
                                    <td>{{ task_obj.start_time }}</td>
                                    <td>{{ task_obj.end_time }}</td>
                                    <td>{{ task_obj.overtime }}</td>


                                </tr>
                                </tbody>
                                <thead>
                                <tr>
                                    <th>Server数量</th>
                                    <th>MFD数量</th>
                                    <th>Printer数量</th>
                                    <th>总共用时</th>
                                    <th>占位</th>



                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>{{ task_obj.task_server_num }}</td>
                                    <td>{{ task_obj.task_mfd_num }}</td>
                                    <td>{{ task_obj.task_printer_num }}</td>
                                    <td>{{ task_obj.total_time }}</td>
                                    <td></td>


                                </tr>
                                </tbody>
                                <thead>
                                <tr>
                                    <th colspan="5" style="text-align: left">工作内容记录：</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td colspan="5" style="text-align: left">
                                        {{ task_obj.content }}
                                    </td>
                                </tr>
                                </tbody>


                            </table>
                            {#                            <div class="panel panel-info">#}
                            {#                                <div class="panel-heading">#}
                            {#                                    工作内容记录：#}
                            {#                                </div>#}
                            {#                                <div class="panel-body" id="previewTaskContent">#}
                            {#                                    <textarea>{{ task_obj.content }}</textarea>#}
                            {#                                </div>#}
                            {#                            </div>#}

                        </div>
                    {% else %}
                        <div style="text-align: center; margin-top: 150px">
                            <h4>SR No#: {{ project_obj.SR_No }}</h4>
                            <h4>项目名称： {{ project_obj.customer }}</h4>

                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>
        var PROJECT_URL = '{% url 'project_info' p_id=project_obj.id %}'


        $(function () {
            // 初始化task目录
            initCatalog();
        })

        // 初始化目录
        function initCatalog() {
            $.ajax({
                url: '{% url 'tasklist' p_id=project_obj.id %}',
                type: 'get',
                dataType: 'JSON',
                success: function (res) {
                    console.log(res);
                    if (res.status) {
                        $.each(res.data, function (index, item) {
                            console.log(index + '<--->' + item.id + '<--->' + item.task_number);
                            var href = PROJECT_URL + '?task_id=' + item.id;
                            var li = $('<li>').attr('id', 'id_' + item.id).append($('<a>').text(item.task_number).attr('href', href));
                            $('#catalog').append(li);
                        })
                    } else {
                        console.log(res.error_info);
                    }
                }
            })
        }


    </script>

{% endblock %}